<template>
  <div class="message-play">
    <img src="../static/images/icon/horn.png" class="hornImg" alt="" />
    <swiper
      :vertical="true"
      :autoplay="true"
      duration="1000"
      class="swiper-cont"
      @click="tonews"
    >
      <swiper-item
        v-for="item in noticeList.records"
        :key="item.id"
        class="items"
        >{{ item.title }}</swiper-item
      >
    </swiper>
    <span class="arrow"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    noticeList: Object,
  },

  methods: {
    tonews() {
      wx.navigateTo({
        url: "/pages/recent-news/index",
      });
    },
   
  },
};
</script>

<style scoped>
.message-play {
  position: relative;
  height: 90rpx;
  background: #fff;
  margin: auto;
  padding: 0 60rpx 0 110rpx;
  box-sizing: border-box;
  box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
  border: 2rpx solid #fafafa;
}
.message-play .swiper-cont {
  height: 90rpx;
  line-height: 90rpx;
}
.items {
  height: 90rpx;
  line-height: 90rpx;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-align: left;
  font-size: 26rpx;
  font-weight: bold;
  overflow: hidden;
}

.hornImg {
  width: 77rpx;
  height: 36rpx;
  position: absolute;
  left: 20rpx;
  top: 27rpx;
  margin-right: 8rpx;
}
.arrow {
  width: 15rpx;
  height: 15rpx;
  border-top: 3rpx solid #686868;
  border-right: 3rpx solid #686868;
  transform: rotate(45deg);
  position: absolute;
  right: 30rpx;
  top: 34rpx;
}
</style>
